<template>
  <div class="body" id="main">

    <section class="data-banner data-banner2">
      <div id="w0" class="anchor" style="-webkit-transform:translateY(-122px);transform: translateY(-122px)"></div>
      <div class="center-block">
        <div class="Crumbs">
          您的位置：
          <router-link to="/">首页<b>&gt;</b></router-link>
          <router-link to="/dataService">数据服务<b>&gt;</b></router-link>
          <a href="javascript:;">企业主页</a>
        </div>
        <div class="banner2-con">
          <h2>{{baseInfo.title}}</h2>
          <p>
            <span><small>统一社会信用代码</small>{{baseInfo.xinyongID}}</span>
          </p>
        </div>
        <section class="distribution  clearfix">
          <div class="distributionLeft">
            <ul class="distributionLeftUl">
              <li class="">
                <div class="cieMain">
                  <h4><span>企业法人</span>{{baseInfo.faren}}</h4>
                </div>
              </li>
              <li class="">
                <div class="cieMain">
                  <h4><span>注册类型</span>股份有限公司</h4>
                </div>
              </li>
              <li class="">
                <div class="cieMain">
                  <h4><span>成立日期</span>2011年12月33日</h4>
                </div>
              </li>
              <li>

                <div class="cieMain">
                  <h4><span>注册属地</span>安徽省-合肥市-高新区</h4>
                </div>
              </li>
              <li class="">
                <div class="cieMain">
                  <h4><span>经营地址</span>安徽省合肥市高新区创新大道2800号创新产业园二期J栋C座601</h4>
                </div>
              </li>
            </ul>
          </div>
          <div class="distributionRight">

            <div class="clearfix">
              <div class="fengshu">
                综合评分 <br>
                <a href="#none"><i class="dtFont gray dtFont-wenhao1"></i>评分规则</a>

              </div>

              <div class="fengshuA"><span><font>{{baseInfo.zhonghepingfen}}</font>分</span></div>
              <div class="star" :class="baseInfo.zhonghepingfen | parseStar">
                <span><i class="dtFont dtFont-wujiaoxing-"></i></span>
                <span><i class="dtFont dtFont-wujiaoxing-"></i></span>
                <span><i class="dtFont dtFont-wujiaoxing-"></i></span>
                <span><i class="dtFont dtFont-wujiaoxing-"></i></span>
                <span><i class="dtFont dtFont-wujiaoxing-"></i></span>
              </div>
            </div>
            <radar :radarId="'leiD1'" :radarClass="'leiD'"></radar>
          </div>
        </section>
      </div>

    </section>

    <navigation id="nav" :navData="companyData"></navigation>

    <section class="sectionItem">
      <div class="sectionItemHead">

        <div class="center-block">
          <div class="anchor" id="w1"></div>
          <h3 class="circular-title">当前行为限制</h3>
        </div>

      </div>
      <div class="comTabox center-block">
        <el-table :data="xingwei.rows" style="width: 100%" class="detail-table">
          <el-table-column type="index" label="序号" width="80"></el-table-column>
          <el-table-column prop="quyu" label="限制区域" width="165"></el-table-column>
          <el-table-column prop="time" label="限制时间" width="285"></el-table-column>
          <el-table-column prop="neiRong" label="行为限制内容" width="310"></el-table-column>
          <el-table-column prop="laiYuan" align="right" label="处罚来源（处罚文号 时间）">
            <template slot-scope="scope">
              {{scope.row.laiYuan}} <br>({{scope.row.wenHao}} {{scope.row.chufaTime}})
            </template>
          </el-table-column>
        </el-table>
        <div class="padding-top-20">
          <el-pagination
            background
            :current-page="1"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="xingwei.total">
          </el-pagination>
        </div>

      </div>
    </section>

    <section class="sectionItem padding-top-0">
      <div class="sectionItemHead">

        <div id="w2" class="QuaT center-block">
          <div class="anchor" ></div>
          <h3 class="circular-title">证书信息</h3>
          <div id="QuaTle1" class="QuaTle">
            <span class="active">企业资质</span>
            <span>安全生产许可证</span>
          </div>
        </div>

      </div>
      <div class="QualifiBox center-block">
        <div id="QuaBoy1" class="QuaBoy">
          <section class="active">

            <el-table :data="cerInfo.rows" style="width: 100%" class="detail-table line">
              <el-table-column type="index" label="序号" width="90">
                <template slot-scope="scope">
                  <p class="text" v-for="(item,index) in scope.row.infoName" :key="index">{{index+1}}</p>
                </template>
              </el-table-column>
              <el-table-column prop="" label="资质项名称(取得日期)" width="355">
                <template slot-scope="scope">
                  <p @click="toDialog" class="text" v-for="(item,index) in scope.row.infoName" :key="index"><a
                    href="javascript:;">{{item}}</a></p>
                </template>
              </el-table-column>
              <el-table-column prop="infoNum" label="证书编号" width="230">
              </el-table-column>
              <el-table-column prop="infoTime" label="证书有效期" width="200"></el-table-column>
              <el-table-column prop="infoUnit" label="发证机关" width="200"></el-table-column>
              <el-table-column prop="infoType" align="right" label="资质类别"></el-table-column>
            </el-table>


            <div class="padding-top-20">
              <el-pagination
                background
                :current-page="1"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="xingwei.total">
              </el-pagination>
            </div>
          </section>

        </div>
      </div>

    </section>

    <section class="sectionItem bg">
      <div class="sectionItemHead">
        <div class="center-block">
          <div class="anchor" id="w3"></div>
          <h3 class="circular-title wew">分支机构
            <small>共有<font class="orange">{{swiper.total}}</font>个分支机构</small>
          </h3>
        </div>
      </div>
      <div class="betBox center-block relative">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in swiperResult" :key="index">
              <ul class="bet4 clearfix">
                <li v-for="(value,index2) in item" :key="index2">
                  <h3><a href="javascript:;" @click="toDialogSwp(e)"><i>{{value.idx}}</i>{{value.title}}</a></h3>
                  <dl class="clearfix">
                    <dd><span>机构负责人</span>{{value.fuze}}</dd>
                    <dd><span>机构设立地</span>{{value.jigou}}</dd>
                    <dd><span>技术负责人</span>{{value.jsfzr}}</dd>
                    <dd><span class="padLeft">设立时间</span>{{value.slsj}}</dd>
                  </dl>
                </li>
              </ul>
            </div>

          </div>

        </div>
        <a class="betBoxbtn betBoxLeft" href="javascript:;"><i class="dtFont dtFont-jiantou"></i></a>
        <a class="betBoxbtn betBoxRight" href="javascript:;"> <i class="dtFont dtFont-jiantou-copy"></i></a>
        <div class="progress-b">
          <div></div>
        </div>
      </div>
    </section>

    <!---->
    <tabPreson></tabPreson>


    <section class="sectionItem padding-top-0">
      <div class="sectionItemHead">
        <div class="QuaT center-block">
          <div class="anchor" id="w5"></div>
          <h3 class="circular-title">企业业绩</h3>
          <div id="QuaTle5" class="QuaTle">
            <span :class="achievement.statIdx===0?'active':''" @click="achien(0)">工程项目(9)</span>
            <span :class="achievement.statIdx===1?'active':''" @click="achien(1)">单位工程 (7)</span>
            <span :class="achievement.statIdx===2?'active':''" @click="achien(2)">申报的历史业绩 (8)</span>
          </div>
        </div>
      </div>

      <div class="comBox center-block">

        <div id="QuaBoy5" class="QuaBoy">
          <section class="active">
            <el-table height="520" :v-loading="achievement.loadVisible" :data="staff2.rows" style="width: 100%" class="detail-table">
              <el-table-column type="index" label="序号" width="80"></el-table-column>
              <el-table-column prop="name" label="工程名称" width="310"></el-table-column>
              <el-table-column prop="youDate" label="承接时间" width="145"></el-table-column>
              <el-table-column prop="number" label="合同额（万元）" width="155"></el-table-column>
              <el-table-column prop="id" label="发包单位" width="270"></el-table-column>
              <el-table-column prop="jiguan" align="right" label="获得业绩指数"></el-table-column>
            </el-table>
            <div class="padding-top-20">
              <el-pagination
                background
                :current-page="1"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="xingwei.total">
              </el-pagination>
            </div>
          </section>
        </div>

      </div>

    </section>

    <section class="sectionItem bg">
      <div class="sectionItemHead">

        <div class="QuaT center-block">
          <div class="anchor" id="w6"></div>
          <h3 class="circular-title">企业信用</h3>
          <div id="QuaTle6" class="QuaTle">
            <span :class="credit.statIdx===0?'active':''" @click="creditFn(0)">良好行为(9)</span>
            <span :class="credit.statIdx===1?'active':''" @click="creditFn(1)">不良行为 (7)</span>
            <span :class="credit.statIdx===2?'active':''" @click="creditFn(2)">行政处罚 (8)</span>
          </div>
        </div>
      </div>
      <div class="comBox center-block">
        <div id="QuaBoy6" class="QuaBoy">
          <section class="active">
            <el-table :data="xingwei.rows" style="width: 100%" class="detail-table">
              <el-table-column type="index" label="序号" width="80"></el-table-column>
              <el-table-column prop="quyu" label="信用编号" width="150"></el-table-column>
              <el-table-column prop="time" label="生效截止日期" width="225"></el-table-column>
              <el-table-column prop="neiRong" label="信用行为"></el-table-column>
              <el-table-column v-if="credit.punish" type="index" prop="index" width="80" label="行政"></el-table-column>
              <el-table-column prop="time" label="记录分值" width="120"></el-table-column>
              <el-table-column prop="laiYuan" align="right" width="220" label="处罚来源(处罚文号 时间)">
                <template slot-scope="scope">
                  {{scope.row.laiYuan}} <br>({{scope.row.wenHao}} {{scope.row.chufaTime}})
                </template>
              </el-table-column>
            </el-table>
            <div class="padding-top-20">
              <el-pagination
                background
                :current-page="1"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="xingwei.total">
              </el-pagination>
            </div>
          </section>
        </div>
      </div>


      <div class="xinY center-block clearfix">
        <h3 class="pull-left w100 circular-title">信用评价</h3>

        <div class="xinYfirst">
          <div class="fengshu">
            综合评分<a href="#"><i class="dtFont gray dtFont-wenhao1"></i> 评分规则</a>
          </div>

          <div class="fengshuA"><span><font>{{baseInfo.zhonghepingfen}}</font>分</span></div>
          <div class="star" :class="baseInfo.zhonghepingfen | parseStar">
            <span><i class="dtFont dtFont-wujiaoxing-"></i></span>
            <span><i class="dtFont dtFont-wujiaoxing-"></i></span>
            <span><i class="dtFont dtFont-wujiaoxing-"></i></span>
            <span><i class="dtFont dtFont-wujiaoxing-"></i></span>
            <span><i class="dtFont dtFont-wujiaoxing-"></i></span>
          </div>
        </div>

        <div class="xinYleft">

          <ul class="starUl">
            <li v-if="star!== undefined && star.length!==0" class="clearfix" v-for="(value,index) in star" :key="index">
              <div class="credit">{{value.title}}</div>
              <div class="star" :class="value.fen | parseStar">
                <span><i class="dtFont dtFont-wujiaoxing-"></i></span>
                <span><i class="dtFont dtFont-wujiaoxing-"></i></span>
                <span><i class="dtFont dtFont-wujiaoxing-"></i></span>
                <span><i class="dtFont dtFont-wujiaoxing-"></i></span>
                <span><i class="dtFont dtFont-wujiaoxing-"></i></span>
              </div>
              <div class="fenshu">{{value.fen}}分</div>
              <div class="compare compareDown">
                <i class="dtFont" :class="value.up?'dtFont-shangsheng':'dtFont-xiajiang1'"></i>{{value.up?'高':'低'}}于同行标准
                <span>{{value.zhi}}</span>
              </div>
            </li>
            <li v-if="star!== undefined && star.length===0" style="height: 260px;" class="noData"></li>
          </ul>
        </div>
        <radar :radarId="'leiD2'" :radarClass="'xinYright'"></radar>
      </div>

    </section>

    <section class="sectionItem">
      <div class="sectionItemHead">
        <div class="QuaT center-block">
          <div class="anchor" id="w7"></div>
          <h3 class="circular-title">数据统计</h3>
          <div id="QuaTle7" class="QuaTle">
            <span v-for="(item,index) in dataStats"
                  :class="{active:statIdx==index}"
                  @click="tabStats(index)"
                  :key="index">{{item}}</span>
          </div>
        </div>
      </div>

      <div class="comBox center-block">

        <div id="QuaBoy7" class="QuaBoy">
          <section v-if="statIdx===0" class="active">
            <div class="cla clearfix">
              <div class="claLeft">
                <h4 class="blue-title">企业人员学历占比</h4>
                <div class="chart">
                  <pieChart id="comEdu" :data="comEduData"/>
                </div>
              </div>
              <div class="claRight">
                <h4 class="blue-title">企业人员分类</h4>
                <div class="chart">
                  <projectBar id="companyType" :data="comTypeData"/>
                </div>
              </div>
            </div>
          </section>
          <section v-if="statIdx===1" class="active">

            <!--下面的是演示占位的dom元素 实际用时删除-->
            <div class="center" style="height: 418px;">
              <flowChart id="flowChart" />
            </div>

          </section>
          <section v-if="statIdx===2" class="active">
            <div class="cla clearfix">
              <div class="claLeft">
                <h4 class="blue-title">企业资质人员数量统计</h4>
                <div class="chart">
                  <quaChart id="quaChart" :data="registerData" />
                </div>
              </div>
              <div class="claRight">
                <h4 class="blue-title">注册人员分析</h4>
                <div class="chart">
                  <projectBar id="register" :data="registerData"/>
                </div>
              </div>
            </div>

          </section>

        </div>

      </div>


    </section>

    <!-- 弹框企业资质详情 -->
    <dia-log ref="dialogTo" :dialogList="dialogList"></dia-log>
    <swp ref="swp" :dialogList="dialogList"></swp>
  </div>
</template>

<script>
  import Swiper from "swiper"
  import {getComDetail, getComBranch, getEvaluate, getPullStaff} from '@/api/dataService';
  import navigation from '@/components/navigation';
  import radar from "../charts/radarChart";
  import tabPreson from "./tabPreson";
  import diaLog from "./diaLog"
  import swp from "./swperLog"
  import pieChart from "@/views/dataService/charts/pieChart";
  import projectBar from '@/views/dataService/charts/projectBar'
  import flowChart from '@/views/dataService/charts/flowChart'
  import quaChart from '@/views/dataService/charts/quaChart'

  export default {
    name: "companyDetail",
    components: {radar, navigation, tabPreson, diaLog, swp, pieChart, projectBar,flowChart,quaChart},
    data() {
      return {
        dialogVisible: false,
        swiperVis: false,
        // //父组件的数据绑定到子组件的包裹层上的数据
        dialogList: {},

        //企业业绩模块
        achievement:{
          loadVisible: false,
          statIdx:0,
          data:[],
          total:30
        },

        //企业信用模块
        credit:{
          loadVisible: false,
          punish:false,
          statIdx:0,
          data:[],
          total:30
        },

        staff2: {},
        companyData: {
          navList: [
            {name: '基本信息', id: 'w0'},
            {name: '当前行为限制', id: 'w1'},
            {name: '证书信息', id: 'w2'},
            {name: '分支机构', id: 'w3'},
            {name: '企业人员', id: 'w4'},
            {name: '企业业绩', id: 'w5'},
            {name: '企业信用', id: 'w6'},
            {name: '数据统计', id: 'w7'}
          ],
          top: 535
        },
        id: '',
        star: [],
        baseInfo: {},
        xingwei: {},
        xinxi: {},
        swiper: {},
        swiperResult: [],
        staffTable: [],
        loading: true,
        cerInfo: {
          page: 1,
          pageSize: 1,
          rows: [{
            infoName: [
              "市政公用工程施工总承包一级(2019-05-09)",
              "市政公用工程施工总承包一级(2019-05-09)",
              "市政公用工程施工总承包一级(2019-05-09)",
              "市政公用工程施工总承包一级(2019-05-09)",
              "市政公用工程施工总承包一级(2019-05-09)",
              "市政公用工程施工总承包一级(2019-05-09)",
              "市政公用工程施工总承包一级(2019-05-09)",
              "市政公用工程施工总承包一级(2019-05-09)",
              "市政公用工程施工总承包一级(2019-05-09)",
              "市政公用工程施工总承包一级(2019-05-09)"
            ],
            infoNum: 'D1467468',
            infoTime: '2019-05-09',
            infoUnit: '住房和城乡建设部',
            infoType: '建筑业资质'
          }]
        },
        statIdx: 0,
        dataStats: ['人员构成', '人员流动', '注册人员分析'],
        comEduData: [
          {regionName: '研究生',value:'45'},
          {regionName: '本科',value:'20'},
          {regionName: '大专',value:'10'},
          {regionName: '高中',value:'5'}],
        comTypeData:[
          {regionName: '注册人员',value:'25'},
          {regionName: '职称人员',value:'75'},
          {regionName: '安全人员',value:'200'},
          {regionName: '岗位人员',value:'330'},
          {regionName: '技术工人',value:'380'},
          {regionName: '特种人员',value:'310'}
        ],
        registerData:[
          {regionName: '注册监理工程师',value:'1'},
          {regionName: '一级注册建造师',value:'10'},
          {regionName: '注册造价工程师',value:'2'}
        ]
      }
    },
    mounted() {
      this.$router.afterEach((to, from, next) => {
        window.scrollTo(0, 0)
      })
      this.id = this.$route.query.id || '';
      //console.log(this.id)
      this.getComDetail({
        id: this.id
      })
      this.getComBranch()
      this.getPullStaff()
      this.getEvaluate()
    },
    methods: {
      // 点击弹框事件
      toDialog() {
        this.$refs.dialogTo.dialogOpen();
      },
      toDialogSwp() {
        this.$refs.swp.dialogOpen();
      },
      getComDetail(data) {
        getComDetail(data).then(res => {
          //console.log(res)
          this.baseInfo = res.baseInfo
          this.star = res.baseInfo.zhonghepingfe
          this.xingwei = res.xingwei
          this.xinxi = res.xinxi
        })
      },
      getComBranch(data) {
        getComBranch(data).then(res => {
          let obj = res.fenZhi
          let that = this
          this.swiper = obj
          let result = []//每4个分一组
          let i = 0, j = obj.rows.length
          for (; i < j; i += 4) {
            result.push(obj.rows.slice(i, i + 4));
          }
          this.swiperResult = result;
          setTimeout(function () {
            that.tahtSwiper()
          }, 3000)

        })
      },
      tahtSwiper() {
        let num = $('.swiper-wrapp' + 'er > .swiper-slide').length
        width(0);
        let mySwiper = new Swiper('.swiper-container', {})
        $('.betBoxLeft').on('click', function (e) {
          e.preventDefault();
          mySwiper.swipePrev();
          width(mySwiper.activeIndex);
        });
        $('.betBoxRight').on('click', function (e) {
          e.preventDefault();
          mySwiper.swipeNext();
          width(mySwiper.activeIndex);
        });

        function width(e) {
          $('.progress-b').children('div').css({
            width: (e + 1) / num * 100 + "%"
          });
        }
      },

      getEvaluate(data) {
        getEvaluate(data).then(res => {
          //console.log(res)
          this.star = res.star
        })
      },
      getPullStaff(data) {
        getPullStaff(data).then(res => {
          // console.log(res)
          this.staff2 = res.staff
        })
      },
      tabStats(index) {
        this.statIdx = index
      },

      achien(index) {
        this.achievement.statIdx = index
      },

      creditFn(index) {
        this.credit.statIdx = index
        this.credit.punish = index === 2;
      }

    },
    watch: {
      $route: {
        handler: function (val, oldVal) {
          console.log(val, oldVal);
        },
        // 深度观察监听
        deep: true
      }
    },
    filters: {
      parseStar: function (value) {
        if (!value) return ''
        return 'star' + Math.floor(parseFloat(value) / 2);
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assets/css/credit.css";
  @import "../../../assets/css/idangerous.swiper.css";

  .swiper-container {
    height: 400px;
  }

  .tableLhy.tableZg.table > tbody > tr:first-child > td {
    padding-top: 20px;
  }

  /deep/ .el-table {
    &.line {
      th:nth-child(3), td:nth-child(3) {
        padding-left: 50px;
      }
      td:nth-child(3):after {
        content: '';
        display: block;
        width: 1px;
        background: #eeeeee;
        position: absolute;
        height: calc(100% - 50px);
        left: 0;
        top: 25px;
      }
      p.text {
        line-height: 36px;
      }
      tr {
        &:last-child {
          border-bottom: 0;
          td {
            border-bottom: 0;
          }

        }
        td {
          padding: 0;
        }
      }

    }
  }
</style>

